<style lang='less' scoped>
.screen{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.5);
	.screen-info{
		width: 80%;
		height: 100%;
		background: #fff;
		.screen-info__btn{
			width: 100%;
			height: 50px;
			text-align: center;
			line-height: 50px;
		}
		.screen-info__content{
			flex: 1;
			height: 100%;
			overflow: auto;
			-webkit-overflow-scrolling: touch;
			.screen-content__subs{
				padding: 10px 0 20px 10px;
				border-bottom: 1px solid #F1F1F1;
				&:last-child{
					border-bottom: none;
				}
			}
			.screen-title__radio{
				position: relative;
				padding-left: 20px;
				&::before{
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					content: "";
					width: 12px;
					height: 12px;
					border-radius: 50%;
					border: 1px solid #9D9D9D;
				}
				&.active::after{
					position: absolute;
					width: 10px;
					height: 10px;
					background: #7A1533;
					left: 2px;
					top: 50%;
					transform: translateY(-50%);
					content: "";
					border-radius: 50%;
				}
			}
			.screen-item__content{
				flex-wrap: wrap;
				.screen-item{
					padding: 10px 13px;
					background: #F4F4F4;
					border-radius: 3px;
					margin-right: 9.5px;
					margin-bottom: 10px;
					position: relative;
					&.active{
						background: #F1E6EA;
						&::before{
							position: absolute;
							bottom: 0;
							right: 0;
							width: 10px;
							height: 10px;
							background: red;
							content: "";
						}
					}
				}
				.screen-price__item{
					flex: 1;
					width: 100%;
					text-align: center;
				}
				.screen-input{
					width: 120px;
					background: #F4F4F4;
					height: 30px;
					line-height: 30px;
					border-radius: 3px;
					display: inline-block;
				}
			}
		}
	}
}
</style>

<template>
  	<div class="screen flex-row-end" @click="close" :style="{height: 'calc(100% - '+height+'px)'}">
		<div class="screen-info flex-column-start" @click.stop>
			<div class="screen-info__content">
				<div class="screen-content__subs">
					<div class="screen-title flex-row-between text-666 text-14 MB-10 PR-10">
						<span>款式</span>
						<div class="screen-title__radio" :class="{'active': all}" @click="allCheck">
							全选
						</div>
					</div>
					<div class="screen-item__content flex-row-start">
						<div 
							class="screen-item" 
							:class="{'active': item.check}" 
							v-for="(item, index) in screenList" 
							:key="index"
							@click="toggleItemCheck(item)">
							{{item.name}}
						</div>
					</div>
				</div>
				<div class="screen-content__subs">
					<div class="screen-title flex-row-between text-666 text-14 MB-10 PR-10">
						<span>价格区间</span>
					</div>
					<div class="screen-item__content MT-20 PR-10">
						<div class="screen-price__content flex-row-center">
							<div class="screen-price__item"
								@click="checkPrice(item)"
								v-for="(item, index) in priceList" 
								:key="index"
								:class="{'text-main': item.check}">
							{{item.name}}
							</div>
						</div>
						<div class="screen-price__input flex-row-center MT-20">
							<input type="digit" class="screen-input text-center" placeholder="最低价">
							<div class="screen-input_center MR-10 ML-10 text-gray">—</div>
							<input type="digit" class="screen-input text-center" placeholder="最高价">
						</div>
					</div>
				</div>
			</div>
			<div class="screen-info__btn btn-main">确 定</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		// 需要减去的高度
		height: {
			type: Number,
			default: 54
		}
	},
	data() {
		return {
			// 是否全选
			all: false,
			screenList: [{
				name: '梭织衬衫',
				check: false
			}, {
				name: '梭织衬衫',
				check: false
			}, {
				name: '梭织衬衫',
				check: false
			}, {
				name: '梭织衬衫',
				check: false
			}, {
				name: '梭织衬衫',
				check: false
			}, {
				name: '梭织衬衫',
				check: false
			}, {
				name: '梭织衬衫',
				check: false
			}, {
				name: '梭织衬衫',
				check: false
			}, {
				name: '梭织衬衫',
				check: false
			}, {
				name: '卫衣',
				check: false
			}, {
				name: '卫衣',
				check: false
			}, {
				name: '卫衣',
				check: false
			}, {
				name: '卫衣',
				check: false
			}],
			priceList: [{
				name: '500以下',
				check: false
			}, {
				name: '500 - 1000',
				check: false
			}, {
				name: '1000以上',
				check: false
			}]
		}
	},
	methods: {
		/**
		 * 切换当前item是否选中
		 * @param {Object} item 当前点击的数据对象
		 */
		toggleItemCheck(item) {
			item.check = !item.check
			let bool = true
			for (let i = 0, len = this.screenList.length; i < len; i++) {
				let sub = this.screenList[i]
				if (!sub.check) {
					bool = false
					break
				}
			}
			this.all = bool
		},
		/**
		 * 全选
		 */
		allCheck() {
			this.all = !this.all
			this.screenList.map(item => {
				item.check = this.all
				return item
			})
		},
		/**
		 * 切换价格
		 * @param {Object} item 当前点击的数据对象
		 */
		checkPrice(item) {
			this.priceList.map(item => {
				item.check = false
				return item
			})
			item.check = true
		},
		/**
		 * 关闭当前筛选层
		 */
		close() {
			this.$emit('close')
		}
	}
}
</script>